<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: red;
        }
    </style>
</head>

<body>
  
    <div id="app">
        <router-view></router-view>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
<script>
    const Index = {
        data() {
            return {
                list: [
                    { id: 1, title: '新闻1' },
                    { id: 2, title: '新闻2' },
                    { id: 3, title: '新闻3' },
                ]
            }
        },
        template: `<div class="index">
                        <ul>
                            <router-link tag="li" :to="{ name: 'info', query: { id: item.id } }" v-for="item,index in list" :key="index">
                              {{ item.title }}
                            </router-link>
                        </ul>
                    </div>`,
        methods: {
            goInfo(id) {
                this.$router.push({
                    name: 'info',
                    params: {
                        // id: id,
                        id
                    }
                })
            }
        }            
    }
    const Info = { 
        template: `<div class="info">详情</div>` ,
        created() {
            console.log(this.$route.query.id);
        },
    }

    const Car = { 
        template: `<div class="info">购物车</div>` ,
        created() {
            
        },
    }

    const Login = { 
        template: `<div class="info">
            登录页面
            <button @click="login">登录</button>
            </div>` ,
        created() {
            
        },
        methods: {
            login() {
                localStorage.setItem("token", "effdasfgfdasgfnbfddg")
                if (this.$route.query.from) {
                    this.$router.push(this.$route.query.from)
                } else {
                    this.$router.push("/")
                }
            }
        }
    }

    const Error = { 
        template: `<div class="error">404 页面不存在</div>` ,
        created() {
            
        },
    }

    const Layout = { 
        template: `<div class="Layout">
                        <h1>Hello App!</h1>
                        <p>
                            <router-link to="/">Go to Foo</router-link>
                            <router-link to="/info">Go to Bar</router-link>
                        </p>
                        <router-view></router-view>
                    </div>` ,
        created() {
            
        },
    }

    const routes = [
        {   path: '*', component: Error},
        { 
            path: '/', 
            name: 'layout', 
            component: Layout,
            children: [
                { path: 'login', name: 'login', component: Login, meta: { requiresAuth: false, title: '登录' } },
                { path: 'car', name: 'car', component: Car, meta: { requiresAuth: true, title: '购物车' } },
                { path: '/', name: 'index', component: Index, meta: { requiresAuth: false, title: '首页' } },
                { path: 'info', name: 'info', component: Info, meta: { requiresAuth: false, title: '详情' }  }
            ]
        }
    ]

    const router = new VueRouter({
        linkExactActiveClass: "active",
        routes
    })

    // 登录状态检查
    router.beforeEach((to, from, next) => {
        document.title = to.meta.title;
        // 未登录
        if (localStorage.getItem("token") == null) {
            // 你访问的页面还需要登录
            if (to.meta.requiresAuth) {
                next({
                    name: 'login',
                    query: {
                        from: to.fullPath
                    }
                })
            } else {
                next()
            }
        } else {
            next()
        }
    })

    const app = new Vue({
        el: "#app",
        router
    })

 

    // 对比原生js，为什么需要 vue-router 这样的插件来实现页面跳转
    //  

</script>
</html>